<template>
  <el-form v-if="control" ref="controlEdit" :model="control" :rules="rules" label-width="120px">
    <el-card header="基础配置">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="标题" prop="Name">
            <el-input v-model="control.Name" :maxlength="50" placeholder="标题" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="说明" prop="Show">
            <el-input v-model="control.Show" :maxlength="50" placeholder="说明" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-tabs v-model="curTab" type="border-card" style="margin-top: 10px;" @tab-click="tabChange">
      <el-tab-pane label="数据源配置" name="data">
        <el-form-item label="选择数据源" prop="FormId">
          <formInput v-model="control.FormId" placeholder="选择表单" :form-type="[2]" />
        </el-form-item>
        <el-form-item v-if="control.FormId" label="选择统计列" prop="ColumnId">
          <el-select
            v-model="control.FuncType"
            style="width: 20%;float: left;"
            placeholder="计数方式"
            @change="() => ver = ver + 1"
          >
            <el-option label="计数" :value="1" />
            <el-option label="去重计数" :value="5" />
            <el-option label="取和" :value="2" />
            <el-option label="最小值" :value="3" />
            <el-option label="最大值" :value="4" />
          </el-select>
          <formColChiose
            v-model="control.ColumnId"
            style="float: left; width: 80%;"
            :func-type="filterFuncType()"
            :show-mode="[0]"
            :filter-data-type="filterDataType()"
            :ver="ver"
            :table-id.sync="control.TableId"
            :form-id="[control.FormId]"
          />
        </el-form-item>
        <pageFilterEdit ref="pageFilter" :form-id="control.FormId" :disabled="control.FormId == null" :items="wheres" />
      </el-tab-pane>
      <el-tab-pane label="控件样式" name="style">
        <el-row>
          <el-col :span="16">
            <div class="controlView">
              <statisticsControl
                :id="control.Id"
                :width="control.WidthRatio"
                :height="control.HeightGrid"
                :title="control.Name"
                :item="controlSet"
                :content-width="contentWidth"
              />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="header">呈现样式</div>
            <el-form-item label="占用宽度" prop="WidthRatio">
              <el-select v-model="control.WidthRatio" :disabled="lockWidth != null" style="width: 100%;" placeholder="占用宽度">
                <el-option label="1/6" :value="6" />
                <el-option label="1/5" :value="5" />
                <el-option label="1/4" :value="4" />
                <el-option label="1/3" :value="3" />
                <el-option label="1/2" :value="2" />
                <el-option label="2/3" :value="23" />
                <el-option label="整行" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="占用高度(格)" prop="HeightGrid">
              <el-input-number
                v-model="control.HeightGrid"
                :min="5"
                :max="30"
                :step="1"
                :precision="0"
                style="width: 100%;"
                placeholder="占用高度(格)"
              />
            </el-form-item>
            <el-form-item label="字体大小" prop="FontSize">
              <el-slider v-model="control.FontSize" :min="1" :show-input="true" :max="4" :step="0.1" @change="(val) => controlSet.FontSize = val" />
            </el-form-item>
            <el-form-item label="字体颜色" prop="Color">
              <el-color-picker v-model="control.Color" @change="(val) => controlSet.Color = val" />
            </el-form-item>
            <el-form-item label="选择图标" prop="Icon">
              <iconChiose
                v-model="control.Icon"
                @change="(val) => {
                  controlSet.Icon = val
                }"
              />
            </el-form-item>
            <el-form-item label="标题是否居中" prop="IsCenter">
              <el-switch v-model="control.IsCenter" @change="(val) => controlSet.IsCenter = val" />
            </el-form-item>
            <div class="header">数据格式</div>
            <el-form-item label="数值量级" prop="NumMag">
              <enumItem
                :value="control.NumMag"
                :dic-key="EnumDic.PageNumMag"
                placeholder="数值量级"
                sys-head="form"
                @change="(val) => {
                  controlSet.ValueStyle.NumMag = val
                  controlSet.ValueStyle.Unit = null
                  control.Unit = null
                }"
              />
            </el-form-item>
            <el-form-item label="小数位数" prop="Precision">
              <el-input-number
                v-model="control.Precision"
                :min="0"
                :max="4"
                placeholder="小数位数"
                @change="(val) => {
                  controlSet.ValueStyle.Precision = val
                }"
              />
            </el-form-item>
            <el-form-item label="千分符" prop="ThouSep">
              <el-switch
                v-model="control.ThouSep"
                @change="(val) => {
                  controlSet.ValueStyle.ThouSep = val
                }"
              />
            </el-form-item>
            <el-form-item v-if="control.NumMag == null" label="单位" prop="Unit">
              <el-input
                v-model="control.Unit"
                :maxlength="10"
                placeholder="单位"
                @change="(val) => {
                  controlSet.ValueStyle.Unit = val
                }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
import formInput from '@/customForm/components/form/formInput.vue'
import formColChiose from '@/customForm/components/form/formColChiose.vue'
import pageFilterEdit from './pageFilterEdit.vue'
import statisticsControl from '../control/statisticsControl.vue'
import { EnumDic } from '@/customForm/config/formConfig'
import iconChiose from '@/components/tools/iconChiose.vue'
export default {
  components: {
    formInput,
    formColChiose,
    pageFilterEdit,
    statisticsControl,
    iconChiose
  },
  props: {
    contentWidth: {
      type: Number,
      default: null
    },
    source: {
      type: Object,
      default: null
    },
    lockWidth: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      EnumDic,
      control: null,
      controlSet: null,
      curTab: 'data',
      ver: 1,
      wheres: [],
      rules: {
        Name: [
          {
            required: true,
            message: '标题不能为空！',
            trigger: 'blur'
          }
        ],
        WidthRatio: [
          {
            required: true,
            message: '请选择占用宽度！',
            trigger: 'blur'
          }
        ],
        HeightGrid: [
          {
            required: true,
            message: '请选择占用高度！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    source: {
      handler(val) {
        if (val) {
          this.resetForm()
        } else {
          this.control = null
        }
      },
      immediate: true
    }
  },
  mounted() { },
  methods: {
    filterDataType() {
      if (this.control.FuncType === 1 || this.control.FuncType === 5) {
        return []
      } else {
        return [2, 3, 6, 9]
      }
    },
    filterFuncType() {
      if (this.control.FuncType === 1 || this.control.FuncType === 5) {
        return []
      } else {
        return [0]
      }
    },
    tabChange() {
      if (this.curTab === 'style') {
        this.initControlSet()
      }
    },
    initControlSet() {
      this.controlSet = {
        Color: this.control.Color,
        FontSize: this.control.FontSize,
        Icon: this.control.Icon,
        IsCenter: this.control.IsCenter,
        ValueStyle: {
          NumMag: this.control.NumMag,
          Precision: this.control.Precision,
          ThouSep: this.control.ThouSep,
          Unit: this.control.Unit
        },
        IsConfig: true
      }
    },
    resetForm() {
      const set = {
        Id: this.source.Id,
        Name: this.source.Name,
        WidthRatio: this.lockWidth == null ? this.source.WidthRatio : this.lockWidth,
        HeightGrid: this.source.HeightGrid,
        Show: this.source.Show,
        FormId: null,
        IsCenter: false,
        Icon: null,
        FontSize: 0,
        Color: null,
        TableId: null,
        ColumnId: null,
        FuncType: null,
        NumMag: null,
        Precision: null,
        ThouSep: null,
        Unit: null
      }
      if (this.source.ControlConfig && this.source.ControlConfig.Statistics) {
        const conf = this.source.ControlConfig.Statistics
        set.FormId = conf.FormId
        if (conf.Select != null) {
          set.TableId = conf.Select.TableId
          set.ColumnId = conf.Select.ColumnId
          set.FuncType = conf.Select.FuncType
        }
        set.Color = conf.Color
        set.FontSize = conf.FontSize
        set.IsCenter = conf.IsCenter
        set.Icon = conf.Icon
        if (conf.ValueStyle != null) {
          set.NumMag = conf.ValueStyle.NumMag
          set.Precision = conf.ValueStyle.Precision
          set.ThouSep = conf.ValueStyle.ThouSep
          set.Unit = conf.ValueStyle.Unit
        }
        this.wheres = conf.Where
      } else {
        this.wheres = []
      }
      this.control = set
      this.curTab = 'data'
    },
    save() {
      const that = this
      return new Promise((resolve, reject) => {
        that.$refs['controlEdit'].validate((valid) => {
          if (valid) {
            const data = that.getData()
            if (data == null) {
              reject()
              return
            }
            resolve(data)
          } else {
            reject()
            return false
          }
        })
      })
    },
    getData() {
      const where = this.$refs.pageFilter.getValue()
      if (where.isError) {
        return null
      }
      const data = {
        Name: this.control.Name,
        WidthRatio: this.control.WidthRatio,
        HeightGrid: this.control.HeightGrid,
        Show: this.control.Show,
        ControlConfig: {
          Statistics: null
        }
      }
      const config = {
        FormId: this.control.FormId,
        IsCenter: this.control.IsCenter,
        ValueStyle: {
          NumMag: this.control.NumMag,
          Precision: this.control.Precision,
          ThouSep: this.control.ThouSep,
          Unit: this.control.Unit
        },
        Color: this.control.Color,
        FontSize: this.control.FontSize,
        Icon: this.control.Icon,
        Where: where.rows
      }
      if (this.control.ColumnId != null) {
        config.Select = {
          TableId: this.control.TableId,
          ColumnId: this.control.ColumnId,
          FuncType: this.control.FuncType
        }
      }
      data.ControlConfig.Statistics = config
      return data
    }
  }
}
</script>
<style scoped>
.controlView {
    width: 100%;
    height: 600px;
    line-height: 600px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
}
.controlView .el-card {
    display: inline-block;
    line-height: normal;
}
.header {
    height: 30px;
    line-height: 30px;
    border-left: 4px solid #409eff;
    text-indent: 5px;
    font-size: 1.2em;
    margin-bottom: 5px;
}
</style>
